<template>
	<view>
		<view >
			<header-navback></header-navback>
			<add-sel-bg ref="add_sel_bg" from="statistics" :initBg="true" :clickShowMore="false"></add-sel-bg>
		</view>
		<view class="userinfo">
			<view class="top-user flex align-center" >
				<view class="left">
					<view class="headimg">
						<image class="headimg"  :src="info.avatar?info.avatar:'/static/images/member/default_headimg.jpg'"></image>
					</view>
				</view>
				<view class="right" >
					<view class="nickname">
						<text>{{info.nickname?info.nickname:'用户昵称'}}</text>
					</view>
				</view>
				<view class="right2 flex align-center"  >
					<view  @tap="makePhone(info.mobile)" v-if="info.mobile">
						<text class="iconfont mobile">&#xe60c;</text>
					</view>
					<view class="iconbg-detail"  @tap.stop="shareFunc()">
						<text class="iconfont icon-fenxiang" ></text>
						<text class="yqcj">邀请参加</text>
					</view>
					<!-- <text class="mobile" @tap="makePhone(info.mobile)" v-if="info.mobile">{{info.mobile}}</text> -->
				</view>
			</view>
		</view>
		<view class="content" >
			<view class="title">
				<view class="in-title">{{info.title}}</view>
			</view>
			<view class="show-info">
				<view class="left">
					<view class="desc">
						<text>{{info.createtime?info.createtime:'-'}}<text class="zhanwei-text"></text></text>
						<text>{{info.look_sum}}次浏览<text class="zhanwei-text"></text></text>
						<text>{{info.join_count}}人参加</text>
					</view>
					<view class="desc end-time">
						<text>{{info.end_time_text}} 结束</text>
					</view>
				</view>
			</view>
		</view>
		<view class="type-desc">
			<view class="type-content">
				<view class="type-c-list">
					<view class="type-left"><text class="iconfont icon-riqi-shijian"></text>打卡日期：</view>
					<view class="type-right">{{info.s_type_info.s_type_id_text}}
					</view>
				</view>
				<view class="type-c-list">
					<view class="type-left"><text class="iconfont icon-shijian"></text>打卡时段：</view>
					<view class="type-right" v-if="info.s_type_info.dk_start_time == '00:00' && info.s_type_info.dk_end_time == '23:59'">全天</view>
					<view class="type-right" v-else>{{info.s_type_info.dk_start_time}}-{{info.s_type_info.dk_end_time}}</view>
				</view>
				<view class="type-c-list" v-if="info.s_type_info.can_bk == 1">
					<view class="type-left"><text class="iconfont icon-qianming"></text>允许补卡：</view>
					<view class="type-right buka-tip" @tap="changeUserList(2,'bukaTime')">(忘记打卡了?去补卡)</view>
				</view>
				<view class="type-c-list" v-else>
					<view class="type-left"><text class="iconfont icon-qianming"></text>不允许补卡</view>
				</view>
			</view>
		</view>
		<view class="add-button">
			<add-sel-button ref="add_sel_button" :onlyShow="true"></add-sel-button>
		</view>
		<view class="join-list" v-if="userListData.list.length > 0"> 
			<view class="title">
				<view class="fl"><text>打卡完成情况</text><text>({{userListData.successCount}}/{{userListData.list.length}})</text></view>
			</view>
			<view class="list-item">
				<text class="sel-date" :class="userListData.dateIndex == index?'sel-date-active':''"
				 v-for="(item,index) in userListData.dateList" @tap="changeUserList(index,'userListTime')" :key="index">{{item}}</text>
			</view>
			<view class="username-list flex align-center ">
				<view class="username-child" @tap="submit(index)" :class="item.status==1?'username-child-active':''" 
				v-for="(item,index) in userListData.list" :key="index">{{item.name}}</view>
			</view>
		</view>
		<view class="join-list">
			<view class="title">
				<view class="fl">打卡记录</view>
				<view class="fr" @tap="changeOrder">{{joinListOrder[joinListOrderIndex].text}}</view>
			</view>
			<view class="list-item">
				<text class="sel-date" :class="userListData.joindateIndex == index?'sel-date-active':''"
				 v-for="(item,index) in userListData.joinDateList" :key="index" @tap="changeUserList(index,'joinListTime')">{{item}}</text>
				<view class="list flex align-center" v-if="joinList.length > 0" v-for="(item,index) in joinList" :key="index">
					<view class="headimg flex align-center ">
						<image class="head-img" :src="item.avatar" />
					</view>
					<view class="username">
						<view class="name">{{item.nickname}}</view>
						<view class="join-time">{{item.createtime_text}}</view>
					</view>
					<view class="join-time flex align-center flex-wrap join-btn">
						<text v-if="item.showDel" @tap="joinDetailope(index,'del')">删除</text>
						<text v-if="item.showSave" @tap="joinDetailope(index,'save')">修改</text>
						<text v-if="item.showDetail" @tap="joinDetailope(index,'detail')">查看详情</text>
						
					</view>
				</view>
				<view v-if="joinList.length == 0" class="join-list-null">
					{{joinListEmpty}}
				</view>
			</view>
		</view>
		
		<view class="bottom-btn">
			<view class="left-dom" @tap.stop="showOpe()">
				<text class="iconfont icon-guanli"></text>
				<text class="left-title" v-if="info.is_me == 1">管理</text>
				<text class="left-title" v-if="info.is_me == -1">更多</text>
			</view>
			<view class="sub-button-list flex align-center" v-if="buttonInfo.show">
				<view class="sub-button fabu" :class="buttonInfo.bottonStatus == false?'no-fabu':''" @tap="submit">{{buttonInfo.buttonText}}</view>
			</view>
		</view>
		
		<view class="zhanwei"></view>
		<share-wechat ref="share_wechat" :addCheckTop="450" ></share-wechat>
		<mx-date-picker :show="mxDatePicker.showPicker" :type="mxDatePicker.type" :showSeconds="false" :value="mxDatePicker.value" :show-tips="true"
		:show-seconds="true" @confirm="DatePickerEnd" @cancel="DatePickerEnd" />
		<detail-opelist ref="detail_opelist" :showPageIndex="true" ></detail-opelist> 
		<wechat-login ref="wechat_login"  @callback="wechatRegister"></wechat-login>
	</view>
</template>

<script src="./detail.js"></script>

<style lang="scss">
	.type-desc{
		background-color: #ffffff;
		padding: 10rpx 3%;
		.type-content{
			background: #F7F8FA;
			border-radius: 20rpx;
			padding: 20rpx;
			font-size: 26rpx;
			color: #8A8B8D;
			.type-c-list{
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.type-left{
					width: 180rpx;
					.iconfont{
						margin-right: 10rpx;
						font-size: 26rpx;
					}
				}
				.type-right{
					width: 500rpx;
				}
				.buka-tip{
					color: $uni-btn-color;
				}
			}
		}
	}
	.join-list{
		background: #ffffff;
		margin-top: 20rpx;
		padding: 20rpx;
		.username-list{
			width: 100%;
			flex-wrap: wrap;
			.username-child{
				width: 15.6%;
				border: 2rpx solid #eeeeee;
				margin-right: 1%;
				height: 70rpx;
				overflow: hidden;
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #888888;
				background: #eeeeee;
				text-align: center;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;    
			}
			.username-child-active{
				border:2rpx solid $uni-btn-color;
				color: $uni-btn-color;
			}
		}
		.list-item{
			.sel-date{
				display: inline-block;
				height: 30rpx;
				padding: 10rpx 30rpx;
				background: #eeeeee;
				color: #999999;
				border-radius: 30rpx;
				line-height: 30rpx;
				font-size: 26rpx;
				text-align: center;
				margin: 20rpx 20rpx 20rpx 0;
			}
			.sel-date-active{
				background: $uni-btn-color;
				color: #FFFFFF;
			}
			.join-list-null{
				text-align: center;
				padding: 20rpx;
				margin-top: 30rpx;
				font-size: 26rpx;
				color: #666666;
			}
			.list{
				width: 100%;
				height: 120rpx;
				background: #ffffff;
				margin: 20rpx 0;
				border-bottom: 2rpx solid #eeeeee;
				.headimg{
					height: 100%;
					.head-img{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
				.username{
					.name{
						font-size: 30rpx;
						color: #333333;
						padding: 0 20rpx;
						width: 360rpx;
						overflow: hidden;
						height: 60rpx;
						line-height: 60rpx;
						font-weight: 600;
						overflow: hidden;
						margin-top: -14rpx;
						padding: 0 20rpx;
					}
					.join-time{
						padding: 0 20rpx;
					}
					
				}
				.join-time{
					font-size: 24rpx;
					color:#999999;
					
					text{
						    display: inline-block;
						    padding: 5rpx 10rpx;
						    font-size: 24rpx;
					}
				}
				.join-btn{
					width: 300rpx;
					    flex-direction: row-reverse;
				}
			}
		}
		.title{
			height: 50rpx;
			.fl{
				font-weight: 600;
			}
			.fr{
				font-size: 24rpx;
				color: #999999;
				position: relative;
				padding-right: 32rpx;
				
			}
		}
	}
	.bottom-btn{
		position: fixed;
		bottom:0;
		left: 0;
		width: 100%;
		height: 150rpx;
		background: #FFFFFF;
		.left-dom{
			width: 200rpx;
			color: #000000;
			text-align: center;
			text{
				display: inline-block;
				width: 100%;
			}
			.iconfont{
				font-size: 40rpx;
				padding-top: 18rpx;
			}
			.left-title{
				font-size: 24rpx;
			}
		}
		.sub-button-list{
			position: absolute;
			bottom: 50rpx;
			width: 600rpx;
			right: 0px;
			.sub-button{
				letter-spacing: 2rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				border-radius: 50rpx;
			}
			.fabu{
				width: 90%;
				background: $uni-btn-color;
				margin-left: 5%;
				color: #FFFFFF;
				text-align: center;
			}
			.no-fabu{
				background: #d2c7c7;
			}
		}
	}
	
	.content{
		margin-top: 100rpx;
		background: #ffffff;
		padding: 10rpx;
		.title{
			.in-title{
				height: 100%;
				padding-left: 10rpx;
				font-size: 34rpx;
			}
		}
		.show-info{
			margin-top: 20rpx;
			padding-left: 10rpx;
			.left{
				height: 50rpx;
				.desc{
					line-height: 50rpx;
					float: left;
					text{
						display: inline-block;
						font-size: 22rpx;
						color: #999999;
						padding-right: 20rpx;
						position: relative;
					}
					.zhanwei-text{
						width: 2rpx;
						height: 24rpx;
						background-color: #999999;
						padding: 0;
						position: absolute;
						top: 14rpx;
						right: 10rpx;
					}
				}
				.end-time{
					float: right;
				}
				
			}
		}
	}
	.userinfo{
		width: 100%;
		height: 120rpx;
		border-radius: 30rpx 30rpx 0 0;
		position: absolute;
		top: 440rpx;
		background: #fff;
		padding: 0 10rpx;
		.top-user{
			height: 120rpx;
			.right2{
				height: 100%;
				width: 220rpx;
				.iconbg-detail{
					width: 170rpx;
					height: 50rpx;
					color: #ffffff;
					background: $uni-btn-color;
					border-radius: 50rpx;
					text-align: center;
					line-height: 50rpx;
					//float: right;
					margin: 0rpx 0rpx 0 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.yqcj{
						font-size: 24rpx;
					}
				}
				.mobile{
					font-size: 50rpx;
					color: $uni-btn-color;
				}
			}
			.right{
				height:100%;
				width: 410rpx;
				.nickname{
					font-size: 30rpx;
					height: 120rpx;
					color: #777777;
					overflow: hidden;
					display: flex;
					align-items: center;
					padding: 10rpx 10rpx 0 0;
				}
			}
			.left{
				.headimg{
					 overflow: hidden;
					 display: block;
					 margin: 0rpx;
					 margin-right: 10rpx;
					 border-radius: 20rpx;
					 border: 2rpx solid #fff;
					 width: 100rpx;
					 height: 100rpx;
				}
			}
		}
	}
	
</style>
